<template>
  <div class="common-choose-dialog-wrap">
    <span
      class="label"
      @click="showDialog"
      v-if="!tempVal"
      :style="{ '--theme-color': systemInfo.theme }"
      >请选择</span
    >

    <el-tag
      v-else
      style="cursor: pointer"
      type="success"
      :closable="!disabled"
      @close="handleClose"
      @click="showDialog"
      >{{ tempVal }}</el-tag
    >

    <common-choose-dialog
      ref="ChooseDialog"
      :title="title"
      @submitForm="submitForm"
    >
      <common-search slot="search" @search="handleQuery" @reset="resetQuery">
        <el-form
          @submit.native.prevent
          :model="queryForm"
          ref="queryForm"
          :inline="true"
          label-width="65px"
        >
          <el-form-item label="应用名称">
            <common-input
              v-model="queryForm.applicationName"
              clearable
              :verify="false"
              @enter="handleQuery"
            />
          </el-form-item>
        </el-form>
      </common-search>

      <common-table
        v-loading="listLoading"
        slot="content"
        ref="allList"
        :data="allList"
      >
        <el-table-column width="55" align="center">
          <template slot-scope="scope">
            <el-radio-group v-model="isCheckValue" @change="changeRadio">
              <el-radio :label="scope.row.id">{{ "" }}</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column
          label="应用名称"
          align="left"
          prop="applicationName"
          show-overflow-tooltip
        />
        <el-table-column
          label="业务系统"
          align="left"
          prop="businessSystemName"
          show-overflow-tooltip
        />
        <el-table-column label="域名" align="left" prop="domain" />
        <el-table-column label="IP" prop="ip" />
        <el-table-column label="应用端口" prop="port" />
      </common-table>
      <pagination
        slot="pagination"
        v-show="total > 0"
        :total="total"
        :page.sync="queryForm.pageNum"
        :limit.sync="queryForm.pageSize"
        @pagination="handleList"
      />
    </common-choose-dialog>
  </div>
</template>

<script>
import HandleChooseDialog from "@/mixins/modules/HandleChooseDialog";
import HandleSubmit from "@/views/screenConfig/dataSet/components/mixin/handleSubmit";
import BaseList from "@/mixins/BaseList";
import { _deepClone } from "@/utils";
import { mapGetters } from "vuex";
import { getApplicationList } from "@/api/system/application/application";
import { listLevel } from "@/api/apisecurity/applicationType/applicationType";
import { decode, encode } from "@/utils/aesUtils";

export default {
  name: "chooseDialog",
  mixins: [HandleChooseDialog, BaseList, HandleSubmit],
  props: {
    selectName: {
      type: String,
    }, //选中项名称
    selectId: {
      type: [String, Number],
    }, //选中项id
    disabled: {
      type: Boolean,
    },
  },
  data() {
    return {
      dialogShow: false,
      title: "应用",
      treeData: [],
      currentNodeKey: "",
      selectedData: [],
      queryForm: {
        deptIds: null,
        pageNum: 1,
        pageSize: 10,
        applicationName: null,
        applicationNameEnCode: null,
        parentId: null,
        interfaceSwitch: 0,
      },
      total: 0,
      isCheckValue: "",
      key: "id",
      selectRow: null,
      tempVal: "",
      applicationType: [], // 所属分类
      cascaderProps: {
        label: "orgName",
        value: "orgId",
        checkStrictly: true,
        emitPath: false,
      },
    };
  },
  computed: {
    ...mapGetters(["systemInfo"]),
  },
  watch: {
    selectName: {
      handler: function (val) {
        this.tempVal = _deepClone(this.selectName);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    showDialog() {
      if (this.disabled) return;
      this.$emit("showDialog");
      this.$refs.ChooseDialog.show();
      if (this.selectName) this.tempVal = _deepClone(this.selectName);
      if (this.selectId) this.isCheckValue = _deepClone(this.selectId);
      this.resetQueryForm();
      // this.getTypeList();
      this.handleTreeList();
    },
    //重置筛选条件
    resetQueryForm() {
      this.queryForm = {
        deptIds: null,
        pageNum: 1,
        pageSize: 10,
        applicationNameEnCode: null,
        applicationName: null,
        parentId: null,
        interfaceSwitch: 0,
      };
    },
    submit() {
      if (!this.selectRow && !this.isCheckValue) {
        this.isClosed = false;
        return this.$GlobalErrorConfirm("添加失败", `请选择${this.title}！`);
      }
      this.isClosed = true;
      this.tempVal = this.selectRow
        ? this.selectRow.applicationName
        : this.tempVal;
      let selectRow = this.selectRow || {
        applicationName: this.tempVal,
        [this.key]: this.isCheckValue,
      };
      this.$emit("submitDialog", selectRow);
    },
    //筛选查询
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.queryForm.pageSize = 10;
      // this.queryForm.applicationName = this.queryForm.applicationNameEnCode
      //   ? encode(this.queryForm.applicationNameEnCode)
      //   : null;
      this.handleList();
    },
    resetForm() {
      this.queryForm.applicationName = "";
      this.queryForm.applicationNameEnCode = null;
    },
    //部门数据
    getTreeList() {
      return new Promise((resolve, reject) => {
        this.handleList();
      });
    },

    //选择列表数据
    getList() {
      return new Promise((resolve, reject) => {
        getApplicationList(this.queryForm).then((res) => {
          if (res && res.code === 200) {
            let list = res.rows;
            resolve({ list, total: res.total });
          } else {
            this.allList = [];
            this.total = 0;
            this.handleListTips(res);
            reject();
          }
        });
      });
    },
    // // 应用分类列表
    // getTypeList() {
    //   listLevel({ type: "0" }).then((res) => {
    //     if (res && res.code === 200) {
    //       this.applicationType = res.data;
    //       this.removeChildren(this.applicationType);
    //     } else {
    //       this.applicationType = [];
    //     }
    //   });
    // },

    // removeChildren(typeList) {
    //   let list = typeList || [];
    //   for (let item of list) {
    //     if (item.children.length === 0) {
    //       delete item.children;
    //     } else {
    //       this.removeChildren(item.children);
    //     }
    //   }
    // },
  },
  mounted() {
    // this.handleTreeList()
  },
};
</script>

<style scoped lang="scss">
.tree-item-wrap {
  display: flex;
  align-items: center;
  width: 100%;
}

.common-choose-dialog-wrap {
  .label {
    font-size: 14px;
    color: var(--theme-color);
    cursor: pointer;
  }

  .name-list {
    cursor: pointer;

    .el-tag {
      margin-right: 4px;
    }
  }
}
</style>
